<template>
  <rk-grid ref="ruleTableGridRef"
    dataUrl="/fileRuleInfo/getFileRuleInfoList"
    style="height: 100%;"
    :boxConfig="false"
    :pagerConfig="false"
    :params="queryParams"
    :columns="tableColumns">
    <template #toolbar_left>
      <el-button type="primary"
        @click="handleAdd">新增</el-button>
    </template>
    <template #toolbar_right>
      <el-input v-model="queryParams.keywords"
        style="width: 240px;"
        placeholder="请输入业务类型或规则配置"
        @input="handleSearch"
        clearable />
    </template>
    <template #operation="{ row }">
      <el-dropdown>
        <span class="el-dropdown-link">
          更多操作
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in tableOperation"
              @click="handleOperation(item,row)">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
  </rk-grid>
  <attachment-rule-form-modal ref="attachmentRuleFormModal"
    @refresh="handleSearch"></attachment-rule-form-modal>
</template>

<script setup>
import { ElMessage, ElLoading } from "element-plus"
import { operationColumn } from '@/config/column-config.js'
import { RkConfirmBox } from '@/components/message-box/index.js'
import { useAttaruleApi } from '@/api/index.js'
import AttachmentRuleFormModal from "./modal/AttachmentRuleFormModal.vue";
import { ArrowDown } from '@element-plus/icons-vue'

const { deleteFileRuleInfo, getFileRuleInfo } = useAttaruleApi();
// 系统参数
const queryParams = reactive({
  keywords: undefined
})

const ruleTableGridRef = ref()

// 新增附件面板模板引用
const attachmentRuleFormModal = ref()

const tableColumns = ref([
  { field: 'busiType', title: '业务类型', width: 150, align: 'left' },
  { field: 'busiProperty', title: '业务子类型', width: 150, align: 'left' },
  { field: 'busiPropertyDesc', title: '业务规则描述', width: 240, align: 'left' },
  { field: 'fileOrder', title: '附件顺序', width: 120, align: 'left' },
  { field: 'fileDesc', title: '附件详细信息', width: 240, align: 'left' },
  {
    field: 'nullable', title: '是否必传', width: 120, align: 'center',
    cellRender: { name: 'enumsRender', enumName: 'REQUIRED_UPLOAD_STATUS', isTag: true }
  },
  {
    field: 'is_limitType', title: '附件类型', width: 120, align: 'center',
    cellRender: { name: 'enumsRender', enumName: 'LIMIT_STATUS', isTag: true },
  },
  { field: 'configInfo', title: '规则配置', width: 240, align: 'left' },
  {
    field: 'maxLimit', title: '附件大小（KB）', width: 200, align: 'left',
    formatter: ({ cellValue, row, column }) => {
      if (row.minLimit == null || row.maxLimit == null) {
        return `-`
      } else {
        return `${row.minLimit} ~ ${row.maxLimit}`
      }
    }
  },
  { field: 'fileSuffix', title: '附件文件格式', width: 300, align: 'left' },
  operationColumn()
])

const tableOperation = ref([
  { id: "0", name: '修改' },
  { id: "1", name: '删除' },
])

// 获取详情
const getDetailInfo = async (ruleId) => {
  const result = await getFileRuleInfo({ ruleId })
  const { data, code, msg } = result
  if (code === 200) {
    attachmentRuleFormModal.value.handleOpen({ model: 'edit', echoForm: data })
  }
}

const handleOperation = (item, row) => {
  if (item.id === '0') {
    getDetailInfo(row.ruleId)
  } else if (item.id === '1') {
    const { ruleId } = row
    let loading = null
    RkConfirmBox({
      title: '提示',
      content: "确定要删除吗",
      onSubmit: async function () {
        loading = ElLoading.service({ fullscreen: true, text: '删除中,请稍等..' })
        const deleteParams = { ruleIds: ruleId }
        const result = await deleteFileRuleInfo(deleteParams)
        const { data, code, msg } = result
        if (code === 200) {
          loading.close()
          ElMessage({ message: `删除成功！`, type: "success" });
          handleSearch();
        } else {
          loading.close()
          ElMessage({ message: `${msg}`, type: "error" });
        }
      },
      onCancel: function () {
      }
    })
  }
}

const handleSearch = () => {
  ruleTableGridRef.value.searchEvent()
}

// 新增项目
const handleAdd = () => {
  attachmentRuleFormModal.value.handleOpen({ model: 'add' })
}
</script>